<template>
    <div>
        <van-field
        :border="false"
        is-link
        readonly
        name="picker"
        label=""
        arrow-direction="down"
        placeholder="选择校区"
        @click="showPicker = true"
        :model-value="schoolName"
        />

            
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom" teleport="body">
            <van-picker
                :columns="columns"
                :model-value="pickerValue"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
        </van-popup>
    </div>

</template>

<script lang="ts" setup>
import type { PickerConfirmEventParams } from 'vant';
import { ref, watch } from 'vue';


const props = defineProps({
    value:String
})

const emit = defineEmits(['select'])

const schoolName = ref('')
const showPicker =  ref(false)
const pickerValue = ref(['']);

const columns = ref([
      { text: '所有校区', value: '' },
      { text: '卫津路校区', value: '卫津路' },
      { text: '北洋园校区', value: '北洋园' },
]);

watch(()=>props.value,()=>{
    console.log('set picker vlaue')
    if(props.value)pickerValue.value = [props.value]
}) 

const onConfirm = (val:PickerConfirmEventParams)=>{
    showPicker.value=false;

    schoolName.value =  val.selectedOptions[0]?.text + ''
    emit('select',val.selectedValues[0])
}


</script>